var current_shape = -1;
var drag_shape = false;
var choose_shape = '';
var insert_image = false;
var resize_shape = -1;
var stage = new Kinetic.Stage({
    container: 'canvasDiv2',
    width: canvasWidth,
    height: canvasHeight
  });
var mouseSX, mouseSY, mouseDX, mouseDY;
var layer = new Kinetic.Layer();
var mode_shape = '';
var resizeX, resizeY, resizing, rotateX, rotateY, rotating, rotateCX, rotateCY;
var current_tool_shape = '';
var img_shape = Array();
// add the layer to the stage
stage.add(layer);

function drawshape(finished){
	if(mode_shape=='') return;
	if(mode_shape=='shape-vuong'){
      var draw_shape = new Kinetic.Rect({
        shapeX: shapeX,
        shapeY: shapeY,
        shapeW: shapeW,
        shapeH: shapeH,
        shapeRotate: 0,
        drawFunc: function(canvas) {
	    	var shapeX = this.attrs.shapeX;
	    	var shapeY = this.attrs.shapeY;
	    	var shapeH = this.attrs.shapeH;
	    	var shapeW = this.attrs.shapeW;

	        var context = canvas.getContext();
	        
	        context.translate(shapeX+shapeW/2, shapeY+shapeH/2);
	        context.rotate(this.attrs.shapeRotate*Math.PI/180);

	        context.beginPath();
		    context.rect(-shapeW/2, -shapeH/2, shapeW, shapeH);
		    canvas.fillStroke(this);
		    context.closePath();

		    if(choose_shape!=''&&this.attrs.name==choose_shape) context.save();
		    if((choose_shape!=''&&this.attrs.name==choose_shape&&insert_image) || img_shape[this.attrs.name]!=undefined) {
		    	context.beginPath(); 
			    context.rect(-shapeW/2, -shapeH/2, shapeW, shapeH);
			    context.clip();
			    context.drawImage(img_shape[this.attrs.name], -shapeW/2, -shapeH/2, shapeW, shapeH);
			    this.attrs.fill = null;
			    context.closePath();
			    canvas.fillStroke(this);
			}

        	if(choose_shape!=''&&this.attrs.name==choose_shape) {
        		context.restore();
		        var old_stroke = this.attrs.stroke;
		        var old_strokeWidth = this.attrs.strokeWidth;
		        var old_fill = this.attrs.fill;
				draw_selection(context, canvas, this);
				this.attrs.stroke = old_stroke;
	    		this.attrs.strokeWidth = old_strokeWidth;
	    		this.attrs.fill = old_fill;
			}

		   	context.rotate((360-this.attrs.shapeRotate)*Math.PI/180);
		    context.translate(-(shapeX+shapeW/2), -(shapeY+shapeH/2));
        },
        fill: shapeColor,
        stroke: 'black',
        strokeWidth: radius,
        draggable: true,
        name : "vuong-" + current_shape,
      });
  	}else if(mode_shape=='shape-tron'){
  	  var draw_shape = new Kinetic.Shape({
        shapeX: shapeX,
        shapeY: shapeY,
        shapeW: shapeW,
        shapeH: shapeH,
        shapeRotate: 0,
        drawFunc: function(canvas) {
	    	var shapeX = this.attrs.shapeX;
	    	var shapeY = this.attrs.shapeY;
	    	var shapeH = this.attrs.shapeH;
	    	var shapeW = this.attrs.shapeW;

	        var context = canvas.getContext();
	        var cx =  0;
	        var cy =  0;
	        var w =   Math.abs(shapeW);
	        var h =   Math.abs(shapeH);

	        context.translate(shapeX+shapeW/2, shapeY+shapeH/2);
	        context.rotate(this.attrs.shapeRotate*Math.PI/180);

	        context.beginPath();
		    var lx = cx - w/2,
		        rx = cx + w/2,
		        ty = cy - h/2,
		        by = cy + h/2;
		    var magic = 0.551784;
		    var xmagic = magic*w/2;
		    var ymagic = h*magic/2;
		    context.moveTo(cx,ty);
		    context.bezierCurveTo(cx+xmagic,ty,rx,cy-ymagic,rx,cy);
		    context.bezierCurveTo(rx,cy+ymagic,cx+xmagic,by,cx,by);
		    context.bezierCurveTo(cx-xmagic,by,lx,cy+ymagic,lx,cy);
		    context.bezierCurveTo(lx,cy-ymagic,cx-xmagic,ty,cx,ty);
		    canvas.fillStroke(this);
		    context.closePath();

		    if(choose_shape!=''&&this.attrs.name==choose_shape) context.save();
		    if((choose_shape!=''&&this.attrs.name==choose_shape&&insert_image) || img_shape[this.attrs.name]!=undefined) {
		    	context.beginPath(); 
			    context.moveTo(cx,ty);
			    context.bezierCurveTo(cx+xmagic,ty,rx,cy-ymagic,rx,cy);
			    context.bezierCurveTo(rx,cy+ymagic,cx+xmagic,by,cx,by);
			    context.bezierCurveTo(cx-xmagic,by,lx,cy+ymagic,lx,cy);
			    context.bezierCurveTo(lx,cy-ymagic,cx-xmagic,ty,cx,ty);
			    context.clip();
			    context.drawImage(img_shape[this.attrs.name], -shapeW/2, -shapeH/2, shapeW, shapeH);
			    this.attrs.fill = null;
			    context.closePath();
			    canvas.fillStroke(this);
			}

        	if(choose_shape!=''&&this.attrs.name==choose_shape) {
        		context.restore();
		        var old_stroke = this.attrs.stroke;
		        var old_strokeWidth = this.attrs.strokeWidth;
		        var old_fill = this.attrs.fill;
				draw_selection(context, canvas, this);
				this.attrs.stroke = old_stroke;
	    		this.attrs.strokeWidth = old_strokeWidth;
	    		this.attrs.fill = old_fill;
			}

			context.rotate((360-this.attrs.shapeRotate)*Math.PI/180);
		    context.translate(-(shapeX+shapeW/2), -(shapeY+shapeH/2));
        },
        fill: shapeColor,
        stroke: 'black',
        strokeWidth: radius,
        draggable: true,
        name : "tron-" + current_shape,
      });
  	}else if(mode_shape=='shape-khac'){
  	   var draw_shape = new Kinetic.Shape({
	    drawFunc: function(canvas) {
	    	var shapeX = this.attrs.shapeX;
	    	var shapeY = this.attrs.shapeY;
	    	var shapeH = this.attrs.shapeH;
	    	var shapeW = this.attrs.shapeW;

	        var context = canvas.getContext();

	        context.translate(shapeX+shapeW/2, shapeY+shapeH/2);
	        context.rotate(this.attrs.shapeRotate*Math.PI/180);

	        var p = 5;
	        var r = shapeW/2;
	        var x = 0;
	        var y = 0;
	        var m = 0.5;
		    context.beginPath();
		    context.translate(x, y);
		    context.moveTo(0,0-r);
		    for (var i = 0; i < p; i++)
		    {
		        context.rotate(Math.PI / p);
		        context.lineTo(0, 0 - (r*m));
		        context.rotate(Math.PI / p);
		        context.lineTo(0, 0 - r);
		    }
		    context.translate(-x, -y);
		    canvas.fillStroke(this);
		    context.closePath();

		    if(choose_shape!=''&&this.attrs.name==choose_shape) context.save();
		    if((choose_shape!=''&&this.attrs.name==choose_shape&&insert_image) || img_shape[this.attrs.name]!=undefined) {
		    	context.beginPath(); 
			    context.translate(x, y);
		    	context.moveTo(0,0-r);
			    for (var i = 0; i < p; i++)
			    {
			        context.rotate(Math.PI / p);
			        context.lineTo(0, 0 - (r*m));
			        context.rotate(Math.PI / p);
			        context.lineTo(0, 0 - r);
			    }
			    context.translate(-x, -y);
			    context.clip();
			    context.drawImage(img_shape[this.attrs.name], -shapeW/2, -shapeH/2, shapeW, shapeH);
			    this.attrs.fill = null;
			    context.closePath();
			    canvas.fillStroke(this);
			}

        	if(choose_shape!=''&&this.attrs.name==choose_shape) {
        		context.restore();
		        var old_stroke = this.attrs.stroke;
		        var old_strokeWidth = this.attrs.strokeWidth;
		        var old_fill = this.attrs.fill;
				draw_selection(context, canvas, this);
				this.attrs.stroke = old_stroke;
	    		this.attrs.strokeWidth = old_strokeWidth;
	    		this.attrs.fill = old_fill;
			}

			context.rotate((360-this.attrs.shapeRotate)*Math.PI/180);
		    context.translate(-(shapeX+shapeW/2), -(shapeY+shapeH/2));
	    },
        shapeRotate: 0,
	    fill: shapeColor,
	    stroke: 'black',
	    strokeWidth: radius,
        draggable: true,
        shapeX: shapeX,
        shapeY: shapeY,
        shapeW: shapeW,
        shapeH: shapeW,
        name : "khac-" + current_shape,
	});
  	}else if(mode_shape=='shape-bogoc'){
  	   var draw_shape = new Kinetic.Shape({
	    drawFunc: function(canvas) {
	    	var shapeX = this.attrs.shapeX;
	    	var shapeY = this.attrs.shapeY;
	    	var shapeH = this.attrs.shapeH;
	    	var shapeW = this.attrs.shapeW;

	        var context = canvas.getContext();

	        context.translate(shapeX+shapeW/2, shapeY+shapeH/2);
	        context.rotate(this.attrs.shapeRotate*Math.PI/180);

	        var radius=10;
	        if (Math.abs(shapeW) < 2 * radius) radius = Math.abs(shapeW) / 2;
		    if (Math.abs(shapeH) < 2 * radius) radius = Math.abs(shapeH) / 2;
		    context.beginPath();
		    if(shapeW>0) context.moveTo(-shapeW/2+radius, -shapeH/2);
		    else context.moveTo(-shapeW/2-radius, -shapeH/2);
		    context.arcTo(-shapeW/2+shapeW, -shapeH/2,   -shapeW/2+shapeW, -shapeH/2+shapeH, radius);
		    context.arcTo(-shapeW/2+shapeW, -shapeH/2+shapeH, -shapeW/2,   -shapeH/2+shapeH, radius);
		    context.arcTo(-shapeW/2,   -shapeH/2+shapeH, -shapeW/2,   -shapeH/2,   radius);
		    context.arcTo(-shapeW/2,   -shapeH/2,   -shapeW/2+shapeW, -shapeH/2,   radius);
		    context.closePath();
	        canvas.fillStroke(this);

	        if(choose_shape!=''&&this.attrs.name==choose_shape) context.save();
		    if((choose_shape!=''&&this.attrs.name==choose_shape&&insert_image) || img_shape[this.attrs.name]!=undefined) {
		    	context.beginPath(); 
			    if(shapeW>0) context.moveTo(-shapeW/2+radius, -shapeH/2);
			    else context.moveTo(-shapeW/2-radius, -shapeH/2);
			    context.arcTo(-shapeW/2+shapeW, -shapeH/2,   -shapeW/2+shapeW, -shapeH/2+shapeH, radius);
			    context.arcTo(-shapeW/2+shapeW, -shapeH/2+shapeH, -shapeW/2,   -shapeH/2+shapeH, radius);
			    context.arcTo(-shapeW/2,   -shapeH/2+shapeH, -shapeW/2,   -shapeH/2,   radius);
			    context.arcTo(-shapeW/2,   -shapeH/2,   -shapeW/2+shapeW, -shapeH/2,   radius);
			    context.clip();
			    context.drawImage(img_shape[this.attrs.name], -shapeW/2, -shapeH/2, shapeW, shapeH);
			    this.attrs.fill = null;
			    context.closePath();
			    canvas.fillStroke(this);
			}

        	if(choose_shape!=''&&this.attrs.name==choose_shape) {
        		context.restore();
		        var old_stroke = this.attrs.stroke;
		        var old_strokeWidth = this.attrs.strokeWidth;
		        var old_fill = this.attrs.fill;
				draw_selection(context, canvas, this);
				this.attrs.stroke = old_stroke;
	    		this.attrs.strokeWidth = old_strokeWidth;
	    		this.attrs.fill = old_fill;
			}

			context.rotate((360-this.attrs.shapeRotate)*Math.PI/180);
		    context.translate(-(shapeX+shapeW/2), -(shapeY+shapeH/2));
	    },
        shapeRotate: 0,
	    fill: shapeColor,
	    stroke: 'black',
	    strokeWidth: radius,
        draggable: true,
        shapeX: shapeX,
        shapeY: shapeY,
        shapeW: shapeW,
        shapeH: shapeH,
        name : "bogoc-" + current_shape,
	});
  	}

      layer.add(draw_shape);
      layer.draw();

      var shape = layer.get('Shape')[current_shape];
      if(finished==false) shape.remove();
      else{
	      event_shape(draw_shape);
      }
}
function event_shape(draw_shape){
	draw_shape.on('mouseover', function() {
        document.body.style.cursor = 'pointer';
      });
      draw_shape.on('mouseout', function() {
        document.body.style.cursor = 'default';
      });
      draw_shape.on('mousedown', function(e) {
        choose_shape = $(this).context.attrs.name;
        if(resize_shape!=-1){
        	rotateX = resizeX = e.pageX;
			rotateY = resizeY = e.pageY;
			resizing = true;
        }
        if(resize_shape==9){
			rotating = this.attrs.shapeRotate;
        	rotateCX = this.attrs.shapeX + this.attrs.shapeW/2 + $(this).context.attrs.x;
        	rotateCY = this.attrs.shapeY + this.attrs.shapeH/2 + $(this).context.attrs.y;
        }
      });
      draw_shape.on('mouseup', function() {
        if(resize_shape!=-1){
			resizing = false;
        }
      });
       draw_shape.on('mousemove', function() {
        check_resize();
        if(resize_shape==1) document.body.style.cursor = 'nw-resize';
        else if(resize_shape==2) document.body.style.cursor = 'n-resize';
        else if(resize_shape==3) document.body.style.cursor = 'ne-resize';
        else if(resize_shape==4) document.body.style.cursor = 'e-resize';
        else if(resize_shape==5) document.body.style.cursor = 'nw-resize';
        else if(resize_shape==6) document.body.style.cursor = 'n-resize';
        else if(resize_shape==7) document.body.style.cursor = 'ne-resize';
        else if(resize_shape==8) document.body.style.cursor = 'e-resize';
        else if(resize_shape==9) document.body.style.cursor = 'move';
        else document.body.style.cursor = 'pointer';
      });
      draw_shape.on('dragmove', function(e) {
        if(choose_shape!='' && resizing==true) {
	        var mouseRX = e.pageX;
	        var mouseRY = e.pageY;

	        if(resize_shape==1){
	        	$(this).context.attrs.shapeW -= mouseRX- resizeX;
	        	$(this).context.attrs.shapeH -= mouseRY- resizeY;
	        }
	        if(resize_shape==2){
	        	$(this).context.attrs.shapeX -= mouseRX- resizeX;
	        	$(this).context.attrs.shapeH -= mouseRY- resizeY;
	        }
	        if(resize_shape==3){
	        	$(this).context.attrs.shapeX -= mouseRX- resizeX;
	        	$(this).context.attrs.shapeW += mouseRX- resizeX;
	        	$(this).context.attrs.shapeH -= mouseRY- resizeY;
	        }
	        if(resize_shape==4){
	        	$(this).context.attrs.shapeX -= mouseRX- resizeX;
	        	$(this).context.attrs.shapeY -= mouseRY- resizeY;
	        	$(this).context.attrs.shapeW += mouseRX- resizeX;
	        }
	        if(resize_shape==5){
	        	$(this).context.attrs.shapeX -= mouseRX- resizeX;
	        	$(this).context.attrs.shapeY -= mouseRY- resizeY; 
	        	$(this).context.attrs.shapeW += mouseRX- resizeX;
	        	$(this).context.attrs.shapeH += mouseRY- resizeY;
	        }
	        if(resize_shape==6){
	        	$(this).context.attrs.shapeX -= mouseRX- resizeX;
	        	$(this).context.attrs.shapeY -= mouseRY- resizeY;
	        	$(this).context.attrs.shapeH += mouseRY- resizeY;
	        }
	        if(resize_shape==7){
	        	$(this).context.attrs.shapeY -= mouseRY- resizeY;
	        	$(this).context.attrs.shapeW -= mouseRX- resizeX;
	        	$(this).context.attrs.shapeH += mouseRY- resizeY;
	        }
	        if(resize_shape==8){
	        	$(this).context.attrs.shapeY -= mouseRY- resizeY;
	        	$(this).context.attrs.shapeW -= mouseRX- resizeX;
	        }
	        if(resize_shape==9){
	        	var offsetRotateX = - $('#canvas')[0].offsetLeft - $('.container')[0].offsetLeft;
	        	var offsetRotateY = - $('#canvas')[0].offsetTop;
	        	$(this).context.attrs.shapeX -= mouseRX- resizeX;
	        	$(this).context.attrs.shapeY -= mouseRY- resizeY; 
	        	var _x1 = rotateX+offsetRotateX, _x2 = rotateCX, _x = mouseRX+offsetRotateX, _y1 = rotateY+offsetRotateY, _y2 = rotateCY, _y = mouseRY+offsetRotateY;
	        	var sideRotate = _x*(_y2-_y1)-_x1*(_y2-_y1)-_y*(_x2-_x1)+_y1*(_x2-_x1);
	        	if(sideRotate>=0){
	        		$(this).context.attrs.shapeRotate = rotating + find_angle({x:rotateX+offsetRotateX,y:rotateY+offsetRotateY},{x:mouseRX+offsetRotateX,y:mouseRY+offsetRotateY},{x:rotateCX,y:rotateCY})*180/Math.PI;
	        	}else{
	        		$(this).context.attrs.shapeRotate = rotating - find_angle({x:rotateX+offsetRotateX,y:rotateY+offsetRotateY},{x:mouseRX+offsetRotateX,y:mouseRY+offsetRotateY},{x:rotateCX,y:rotateCY})*180/Math.PI;
	        	}
	        }
        	resizeX = e.pageX;
			resizeY = e.pageY;
	    }
      });
}
function find_angle(p0,p1,c) {
    var p0c = Math.sqrt(Math.pow(c.x-p0.x,2)+
                        Math.pow(c.y-p0.y,2)); // p0->c (b)   
    var p1c = Math.sqrt(Math.pow(c.x-p1.x,2)+
                        Math.pow(c.y-p1.y,2)); // p1->c (a)
    var p0p1 = Math.sqrt(Math.pow(p1.x-p0.x,2)+
                         Math.pow(p1.y-p0.y,2)); // p0->p1 (c)
    return Math.acos((p1c*p1c+p0c*p0c-p0p1*p0p1)/(2*p1c*p0c));
}
function draw_insert_image(img){
	if(choose_shape==''){
	  	var draw_shape = new Kinetic.Shape({
		    drawFunc: function(canvas) {
		    	var shapeX = this.attrs.shapeX;
		    	var shapeY = this.attrs.shapeY;
		    	var shapeH = this.attrs.shapeH;
		    	var shapeW = this.attrs.shapeW;

		        var context = canvas.getContext();

		        context.translate(shapeX+shapeW/2, shapeY+shapeH/2);
	        	context.rotate(this.attrs.shapeRotate*Math.PI/180);

			    context.beginPath();
			    context.rect(-shapeW/2, -shapeH/2, shapeW, shapeH);
			    this.attrs.fill = this.attrs.fillShape;
			    canvas.fillStroke(this);
			    context.closePath();

			    context.beginPath(); 
			    context.rect(-shapeW/2, -shapeH/2, shapeW, shapeH);
			    context.drawImage(img, -shapeW/2, -shapeH/2, shapeW, shapeH);
			    this.attrs.fill = null;
			    context.closePath();
			    canvas.fillStroke(this);

				if(choose_shape!=''&&this.attrs.name==choose_shape) {
			        var old_stroke = this.attrs.stroke;
			        var old_strokeWidth = this.attrs.strokeWidth;
			        var old_fill = this.attrs.fill;
					draw_selection(context, canvas, this);
					this.attrs.stroke = old_stroke;
		    		this.attrs.strokeWidth = old_strokeWidth;
		    		this.attrs.fill = old_fill;
				}

				context.rotate((360-this.attrs.shapeRotate)*Math.PI/180);
		    	context.translate(-(shapeX+shapeW/2), -(shapeY+shapeH/2));
		    },
		    shapeRotate: 0,
		    fillShape: shapeColor,
		    stroke: 'black',
		    strokeWidth: radius,
	        draggable: true,
	        shapeX: 0,
	        shapeY: 0,
	        shapeW: img.width,
	        shapeH: img.height,
	        shapeOW: img.width,
	        shapeOH: img.height,
	        x: (canvasWidth/2-img.width/2),
	        y: (canvasHeight/2-img.height/2),
	        fillPatternOffsetX: -220,
	        fillPatternOffsetY: 70,
	        name : "chenhinh-" + current_shape,
		});

		layer.add(draw_shape);
	    layer.draw();
	    event_shape(draw_shape);
	    current_shape++;
	}else{
		img_shape[choose_shape] = img;
		layer.draw();
	}
	$('.'+current_tool_shape).parent().click();
	$('.'+current_tool_shape).parent().parent().removeClass('active').addClass('active2');
}
function draw_selection(context, canvas, ele){
	var shape = layer.get('.'+choose_shape)[0];
	var x,y,w,h;
	
	x = -shape.attrs.shapeW/2;
	y = -shape.attrs.shapeH/2;
	w = shape.attrs.shapeW;
	h = shape.attrs.shapeH;

    ele.attrs.stroke = '#333333';
    ele.attrs.strokeWidth = 1;

    context.beginPath();
    context.rect(x-5, y-5, 10, 10);
    context.closePath();
    ele.attrs.fill = '#fffff1';
    canvas.fillStroke(ele);

    context.beginPath();
    context.rect(x-5+w/2, y-5, 10, 10);
    context.closePath();
    ele.attrs.fill = '#fffff2';
    canvas.fillStroke(ele);

    context.beginPath();
    context.rect(x-5+w, y-5, 10, 10);
    context.closePath();
    ele.attrs.fill = '#fffff3';
    canvas.fillStroke(ele);

    context.beginPath();
    context.rect(x-5+w, y-5+h/2, 10, 10);
    context.closePath();
    ele.attrs.fill = '#fffff4';
    canvas.fillStroke(ele);

    context.beginPath();
    context.rect(x-5+w, y-5+h, 10, 10);
    context.closePath();
    ele.attrs.fill = '#fffff5';
    canvas.fillStroke(ele);

    context.beginPath();
    context.rect(x-5+w/2, y-5+h, 10, 10);
    context.closePath();
    ele.attrs.fill = '#fffff6';
    canvas.fillStroke(ele);

    context.beginPath();
    context.rect(x-5, y-5+h, 10, 10);
    context.closePath();
    ele.attrs.fill = '#fffff7';
    canvas.fillStroke(ele);

    context.beginPath();
    context.rect(x-5, y-5+h/2, 10, 10);
    context.closePath();
    ele.attrs.fill = '#fffff8';
    canvas.fillStroke(ele);

    context.beginPath();
	context.moveTo(x + w/2, y + h/2 - 7);
	context.lineTo(x + w/2, y + h/2 - 30);
    ele.attrs.fill = null;
    ele.attrs.stroke = '#333333';
    ele.attrs.strokeWidth = 1;
    canvas.fillStroke(ele);  

    context.beginPath();
    context.arc(x + w/2, y + h/2 - 30, 6, 0, 2 * Math.PI, false);
    ele.attrs.strokeWidth = 1;
    ele.attrs.fill = '#ffe400';
    canvas.fillStroke(ele);

    var rotateImg = new Image();
    rotateImg.src = base_url+'img/rotate.png';
    context.beginPath(); 
    context.rect(x + w/2 - 10, y + h/2 - 10, 20, 20);
    context.drawImage(rotateImg, x + w/2 - 10, y + h/2 - 10, 20, 20);
    context.closePath();
    ele.attrs.fill = null;
    ele.attrs.stroke = null;
    ele.attrs.strokeWidth = 0;
    canvas.fillStroke(ele);  
}
function check_drag(){
	var ctx = layer.getContext();
	var get_pixel = ctx.getImageData(mouseSX,mouseSY,1,1);

	if(get_pixel.data[3]==255) return true;
	else {
		choose_shape = '';
		return false;
	};
}
function check_resize(){
	var ctx = layer.getContext();
	var get_pixel = ctx.getImageData(mouseSX,mouseSY,1,1);
	resize_shape = -1;
	if(get_pixel.data[0]==255&&get_pixel.data[1]==255&&get_pixel.data[2]==241) resize_shape = 1;
	if(get_pixel.data[0]==255&&get_pixel.data[1]==255&&get_pixel.data[2]==242) resize_shape = 2;
	if(get_pixel.data[0]==255&&get_pixel.data[1]==255&&get_pixel.data[2]==243) resize_shape = 3;
	if(get_pixel.data[0]==255&&get_pixel.data[1]==255&&get_pixel.data[2]==244) resize_shape = 4;
	if(get_pixel.data[0]==255&&get_pixel.data[1]==255&&get_pixel.data[2]==245) resize_shape = 5;
	if(get_pixel.data[0]==255&&get_pixel.data[1]==255&&get_pixel.data[2]==246) resize_shape = 6;
	if(get_pixel.data[0]==255&&get_pixel.data[1]==255&&get_pixel.data[2]==247) resize_shape = 7;
	if(get_pixel.data[0]==255&&get_pixel.data[1]==255&&get_pixel.data[2]==248) resize_shape = 8;
	if(get_pixel.data[0]==255&&get_pixel.data[1]==228&&get_pixel.data[2]==0) resize_shape = 9;
}
function switch_layer(){
	choose_shape = '';
	layer.draw();
	var ctx = layer.getContext();
	history.push(colorLayerData);
	tempLayerData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
	colorLayerData = context.getImageData(0, 0, canvasWidth, canvasHeight);
	mergeLayerShape();
	mergeLayer();
	mergeLayerKhungTranh();
	context.putImageData(colorLayerData, 0, 0);
	colorLayerData = context.getImageData(0, 0, canvasWidth, canvasHeight);
	layer.remove();
	layer = new Kinetic.Layer();
	stage.add(layer);
	current_shape = -1;
	img_shape = Array();
	$('#canvasDiv2').css('display','none');
}
    // Add mouse events
	// ----------------
$('#canvasDiv2').mousedown(function(e)
{	
	e.originalEvent.preventDefault();
	if(toolChoose<=0||mode_shape=='') return;


	mouseDX = mouseSX = mouseX = e.pageX - this.offsetLeft - $('.container')[0].offsetLeft;
	mouseDY = mouseSY = mouseY = e.pageY - this.offsetTop;
	drag_shape = check_drag();

	if(curTool=='shape' && drag_shape==false){
		current_shape++;
		shapeX = mouseX;
		shapeY = mouseY;
	}
	if(drag_shape==false) paint = true;
});

$('#canvasDiv2').mousemove(function(e){
	if(toolChoose<=0) return;
	mouseSX = mouseX = e.pageX - this.offsetLeft - $('.container')[0].offsetLeft;
	mouseSY = mouseY = e.pageY - this.offsetTop;
	
	if(paint==true){
		
		if(curTool=='shape'){
			shapeW = mouseX - shapeX;
			shapeH = mouseY - shapeY;
		}
		drawshape(false);
	}
});

$('#canvasDiv2').mouseup(function(e){
	if(toolChoose<=0) return;
	mouseX = e.pageX - this.offsetLeft - $('.container')[0].offsetLeft;
	mouseY = e.pageY - this.offsetTop;

  	if(drag_shape==false && paint==true && (mouseX!=mouseDX||mouseY!=mouseDY)) drawshape(true);
  	if(mouseX==mouseDX&&mouseY==mouseDY && drag_shape==false) {
  		current_shape--;
  		choose_shape = '';
  		layer.draw();
  	}
	paint = false;
});

$('#canvasDiv2').mouseleave(function(e){
	if(toolChoose<=0) return;
  	if(drag_shape==false && paint==true && (mouseX!=mouseDX||mouseY!=mouseDY)) drawshape(true);
  	if(mouseX==mouseDX&&mouseY==mouseDY && drag_shape==false) {
  		current_shape--;
  		choose_shape = '';
  		layer.draw();
  	}
	paint = false;
});